<template>
  <div id="app">
    <van-nav-bar
      v-if="!['/login', '/register', '/download'].includes($route.path)"
      :title="$store.state.title"
      fixed
      placeholder
      :left-arrow="!['/', '/wallet', '/mill', '/my'].includes($route.path)"
      @click-left="$router.back()"
    />
    <transition mode="out-in" name="fade-transform">
      <router-view />
    </transition>

    <Loading v-if="$store.state.LOADING"></Loading>
  </div>
</template>

<script>
  import Loading from '@/components/loading'
  export default {
    components: {
      Loading,
    },
  }
</script>

<style>
  @import 'https://at.alicdn.com/t/font_2338060_n5ib5plj9b.css';
</style>
<style lang="less">
  .fade-transform-leave-active,
  .fade-transform-enter-active {
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  .fade-transform-enter {
    opacity: 0;
    transform: translateX(30px);
  }

  .fade-transform-leave-to {
    opacity: 0;
    transform: translateX(-30px);
  }
  #app {
    * {
      box-sizing: border-box;
      -webkit-touch-callout: none; /*系统默认菜单被禁用*/
    }
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .van-nav-bar {
      .van-nav-bar__left {
        .van-icon {
          color: #000;
          font-size: 17px;
        }
      }
      .van-nav-bar__title {
        color: #000;
        font-size: 17px;
      }
    }
  }
</style>
